import { useState, useEffect } from 'react';
import { InputNumber } from 'antd';
import { TextWidget } from '@inbiz/react';

const LoadNumberView = (props: any) => {
  const { onChange, value: formValue } = props;
  const [value, setValue] = useState<any>(formValue);

  useEffect(() => {
    onChange && onChange(value);
  }, [value]);

  return (
    <>
      <InputNumber
        value={value.threshold}
        min={1}
        max={50}
        precision={0}
        onChange={(val) => {
          let values: any = {
            ...value,
            threshold: val || 1,
          };
          setValue(values);
        }}
      />
      <div
        style={{
          border: '1px solid #d9d9d9',
          borderLeft: 'none',
          height: '32px',
          padding: '0 8px',
        }}
      >
        <TextWidget>news.tips.strip</TextWidget>
      </div>
    </>
  );
};

export default LoadNumberView;
